<template>
  <view class="container">
    <view class="intro"
      >本项目已包含uni
      ui组件，无需import和注册，可直接使用。在代码区键入字母u，即可通过代码助手列出所有可用组件。光标置于组件名称处按F1，即可查看组件文档。</view
    >
    <text class="intro">详见：</text>
    <uni-link :href="href" :text="href"></uni-link>
    <button @click="scanCode">扫码</button>
    <button @click="saoma">扫码</button>
    <button @click="turn()">返回上一个页面</button>

    <button @click="createBarcode">扫码</button>

    <div class="scanBox" style="display: none" ref="scanBox">
      <div ref="scanarea" class="qrarea"></div>
      <div class="closeId scanBtn">关闭扫码</div>
      <div class="lineDiv" style="bottom: 80px"></div>
      <div class="selectqrcode scanBtn">从相册选择二维码</div>
    </div>
    <button @click="startRecognize">扫码</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      barcode: null,
      scan: null,
      href: 'https://uniapp.dcloud.io/component/README?id=uniui',
    };
  },
  methods: {
    turn(url) {
      uni.navigateBack();
      // uni.navigateTo({
      //   url: url,
      // });
    },
    scanCode() {
      uni.scanCode({
        onlyFromCamera: true,
        success: function (res) {
          console.log('条码类型：' + res.scanType);
          console.log('条码内容：' + res.result);
        },
      });
    },
    saoma() {
      // 判断是否在 H5 环境
      if (uni.getSystemInfoSync().platform === 'h5') {
        uni.showToast({
          title: 'H5 环境不支持原生扫码功能',
          icon: 'none',
        });
      } else {
        // 调用 plus.barcode 扫码
        const barcode = plus.barcode.create('qr', [plus.barcode.QR], {
          sound: 'none', // 扫码成功是否播放声音，'none' 为不播放
          vibrate: true, // 扫码成功是否震动
        });

        // 将 barcode 附加到当前 Webview 中
        plus.webview.currentWebview().append(barcode);

        // 扫码成功回调
        barcode.onmarked = function (type, result) {
          console.log('条码类型：' + type);
          console.log('条码内容：' + result);

          // 关闭扫码窗口
          barcode.close();

          // 处理扫码结果
          uni.showToast({
            title: '扫码成功：' + result,
            icon: 'none',
          });
        };

        // 扫码失败回调
        barcode.onerror = function (error) {
          console.error('扫码失败：', error);

          // 关闭扫码窗口
          barcode.close();

          uni.showToast({
            title: '扫码失败',
            icon: 'none',
          });
        };

        // 开始扫码
        barcode.start();
      }
    },
    createBarcode() {
      let _this = this;
      if (!_this.barcode) {
        _this.barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
          top: '0px',
          left: '0px',
          width: '100%',
          height: '100%',
          position: 'static',
        });
        _this.barcode.onmarked = function (type, result) {
          console.log('Success: type=' + type + ', result=' + result);

          // 扫码成功后关闭扫码
          _this.barcode.cancel(); // 或者使用 _this.barcode.close();
          _this.barcode = null; // 明确释放引用
        };
        plus.webview.currentWebview().append(_this.barcode);
      }
      _this.barcode.start();
    },
    startRecognize() {
      let scan = null;
      //扫码成功回调
      function onmarked(type, result) {
        onmarkcallback(result);
        scan.close(); //结束视频捕获
        this.$refs.scanBox.style.display = 'none';
      }
      function onmarkcallback(result) {
        console.log('扫描结果result', result);
      }

      //扫码失败回调
      function onerror(error) {
        scan.close(); //结束视频捕获
        this.$refs.scanBox.style.display = 'none';
      }

      try {
        console.log('扫码开始');
        this.$refs.scanBox.style.display = 'block'; //显示扫码div
        var filter = [plus.barcode.QR];
        //自定义的扫描控件样式
        var styles = {
          top: '0px',
          left: '0px',
          width: '100%',
          height: '100%',
          position: 'static',

          frameColor: '#ffffff',
          scanbarColor: '#ffffff',
          background: '',
        };
        scan = new plus.barcode.Barcode('scanarea', filter, styles, true);
        scan.onmarked = onmarked;
        scan.onerror = onerror;
        scan.start(); //开始扫码
        setTimeout(() => {
          console.log(scan);
          console.log('相机初始化');
        }, 3000);
        console.log('扫码主体代码结束');
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>

<style>
.container {
  padding: 20px;
  font-size: 14px;
  line-height: 24px;
}

.scanBox {
  position: absolute;
  z-index: 99999999;
  top: 0px;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-bottom: 150px;
  background: rgba(0, 0, 0, 1);
  display: none;
}
.qrarea {
  width: 100%;
  height: 100%;
  margin: auto;
}
.scanBtn {
  width: 100%;
  position: absolute;
  z-index: 5;
  bottom: 0;
  left: 0;
  color: #ffffff;
  text-align: center;
  height: 80px;
  line-height: 80px;
}
.lineDiv {
  width: 50%;
  position: absolute;
  z-index: 5;
  bottom: 0;
  left: 25%;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}
.closeId {
  bottom: 80px;
}
</style>
